<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber" v-if="data.isPageShow">
				<view style="overflow-x: hidden">
            <view class="status-bar">
                <image mode="aspectFill" :src="data.__wxapp_img.dapp.order_status_bar.url"></image>
                <text>{{data.order.status}}</text>
            </view>
            <navigator class="block flex-row" :url="'/pages/express-detail/express-detail?id='+data.order.order_id+'&order_type='+data.order.order_type" v-if="data.order.express_no&&data.order.is_send==1">
                <view class="flex-grow-1">
                    <view class="mb-10">快递公司：{{data.order.express}}</view>
                    <view class="">快递单号：{{data.order.express_no}}</view>
                </view>
                <view class="flex-grow-0 flex-y-center">
                    <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
                </view>
                <view class="block-row flex-row" v-if="false">
                    <view class="flex-grow-1">快递单号：{{data.order.express_no}}</view>
                    <view class="flex-grow-0">
                        <text @tap="copyText" class="copy-text-btn" :data-text="data.order.express_no">复制</text>
                    </view>
                </view>
            </navigator>
            <view class="block">
                <view class="flex-row block-row">
                    <view class="flex-grow-1">
                        {{data.order.is_offline==0?'联系人：':'收货人：'}}{{data.order.name}}
                    </view>
                    <view class="flex-grow-0">
                        {{data.order.mobile}}
                    </view>
                </view>
                <view v-if="data.order.address">收货地址：{{data.order.address}}</view>
            </view>
            <view class="block flex-row" v-if="data.order.is_offline==1">
                <view class="flex-grow-1">
                    <view class="flex-grow-1">门店名称：{{data.order.shop.name}}</view>
                    <view class="flex-grow-1">联系电话：{{data.order.shop.mobile}}</view>
                    <view class="flex-grow-1">门店地址：{{data.order.shop.address}}</view>
                </view>
                <view class="flex-grow-0 flex-y-center" v-if="data.order.shop.longitude">
                    <text @tap="location" class="copy-text-btn">导航</text>
                </view>
            </view>
            <view class="block">
                <view class="block-row flex-row">
                    <view class="flex-grow-1">订单编号：{{data.order.order_no}}</view>
                    <view class="flex-grow-0">
                        <text @tap="copyText" class="copy-text-btn" :data-text="data.order.order_no">复制</text>
                    </view>
                </view>
                <view>下单时间：{{data.order.addtime}}</view>
                <view class="pay-type">{{data.order.pay_type_text}}</view>
            </view>
            <view class="block">
                <view class="flex-row block-row">
                    <view class="flex-grow-1">商品总额</view>
                    <view class="flex-grow-0" v-if="data.order">￥{{data.order.goods_total_price}}</view>
                    <view class="flex-grow-0" v-else>￥0.00</view>
                </view>
                <view class="flex-row block-row">
                    <view class="flex-grow-1">商品数量</view>
                    <view class="flex-grow-0">×{{data.order.num}}</view>
                </view>
                <view class="flex-row block-row" v-if="data.user_coupon_id">
                    <view class="flex-grow-1">优惠券优惠</view>
                    <view class="flex-grow-0">-￥{{data.order.coupon_sub_price}}</view>
                </view>
                <view class="flex-row block-row" v-if="data.order.integral&&data.order.integral.forehead>0">
                    <view class="flex-grow-1">积分抵扣</view>
                    <view class="flex-grow-0">-￥{{data.order.integral.forehead}}</view>
                </view>
                <view class="flex-row block-row" v-if="data.order.discount<10&&data.order.discount">
                    <view class="flex-grow-1">会员折扣</view>
                    <view class="flex-grow-0">{{data.order.discount}}折</view>
                </view>
                <view class="flex-row block-row" v-if="data.order.before_update">
                    <view class="flex-grow-1">{{data.order.before_update}}</view>
                    <view class="flex-grow-0">￥{{data.order.money}}</view>
                </view>
                <view class="flex-row block-row" v-if="data.order.colonel">
                    <view class="flex-grow-1">团长优惠</view>
                    <view class="flex-grow-0">￥{{data.order.colonel}}</view>
                </view>
                <view class="flex-row block-row">
                    <view class="flex-grow-1">运费</view>
                    <view class="flex-grow-0">￥{{data.order.express_price}}</view>
                </view>
                <view v-if="data.order.content">
                    <view>买家留言</view>
                    <view style="width:100%;overflow:auto;word-wrap:break-word;">{{data.order.content}}</view>
                </view>
                <view v-if="data.order.words">
                    <view>商家留言</view>
                    <view class="fs-sm" style="width:100%;overflow:auto;word-wrap:break-word;">{{data.order.words}}</view>
                </view>
                <view class="block-footer">合计：
                    <text style="color: #ff4544">￥{{data.order.pay_price}}</text>
                </view>
            </view>
            <view class="block">
                <view class="flex-row goods-item" v-for="(item,index) in data.order.goods_list" :key="item.id">
                    <view class="flex-grow-0">
                        <navigator style="font-size: 0" :url="'/pages/goods/goods?id='+item.goods_id">
                            <image mode="aspectFill" :src="item.goods_pic" style="width: 156upx;height: 156upx"></image>
                        </navigator>
                    </view>
                    <view class="flex-grow-1" style="padding-left: 20upx">
                        <view style="margin-bottom: 10upx">
                            <navigator :url="'/pages/goods/goods?id='+item.goods_id">{{item.name}}</navigator>
                        </view>
                        <view class="flex-row">
                            <view class="flex-grow-1">
                                <view style="font-size: 9pt;color: #888;margin-right: 20upx;display: inline-block" v-for="(attr,i) in item.attr" :key="attr.id">
                                    {{attr.attr_group_name}}：{{attr.attr_name}}
                                </view>
                            </view>
                            <view class="flex-grow-0" style="text-align: right">
                                <view>×{{item.num}}</view>
                                <view style="color: #ff4544">￥：{{item.total_price}}</view>
                            </view>
                        </view>
                        <view style="color:#ff4544;text-align:right;font-size:9pt" v-if="item.is_level&&item.is_level==1">享受会员折扣</view>
                        <view v-if="item.order_refund_enable==1">
                            <navigator class="flex-y-center refund-btn" :url="'/pages/order-refund/order-refund?id='+item.order_detail_id" v-if="item.is_order_refund==0">申请售后
                            </navigator>
                            <text class="refund-text" v-if="item.is_order_refund==1">已申请售后</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-footer flex-y-center flex-x-right flex-row" v-if="data.order.is_send==0&&data.order.apply_delete==1">
                <view>退款申请中</view>
            </view>
            <view class="order-footer flex-y-center flex-x-right flex-row" v-if="data.order.is_send==0&&data.order.is_pay==1&&data.order.apply_delete==0">
                <view class="play-btn">
                    <view @tap="orderRevoke" :data-id="data.order.order_id">申请退款
                    </view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        isPageShow: !1,
        order: null,
        getGoodsTotalPrice: function() {
            return this.data.order.total_price;
        }
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var t = this;
        myVue.getApp.core.showLoading({
            title: "正在加载"
        });
        var o = getCurrentPages(), a = o[o.length - 2];
        myVue.getApp.request({
            url: myVue.getApp.api.order.detail,
            data: {
                order_id: e.id,
                route: a.route
            },
            success: function(e) {
                0 == e.code && t.setData({
                    order: e.data,
                    isPageShow: !0
                });
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
		methods: {
			copyText: function(e) {
        var t = e.currentTarget.dataset.text;
        myVue.getApp.core.setClipboardData({
            data: t,
            success: function() {
                myVue.getApp.core.showToast({
                    title: "已复制"
                });
            }
        });
    },
    location: function() {
        var e = this.data.order.shop;
        myVue.getApp.core.openLocation({
            latitude: parseFloat(e.latitude),
            longitude: parseFloat(e.longitude),
            address: e.address,
            name: e.name
        });
    },
    orderRevoke: function(e) {
        var t = this;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "是否退款该订单？",
            cancelText: "否",
            confirmText: "是",
            success: function(o) {
                if (o.cancel) return !0;
                o.confirm && (myVue.getApp.core.showLoading({
                    title: "操作中"
                }), myVue.getApp.request({
                    url: myVue.getApp.api.order.revoke,
                    data: {
                        order_id: e.currentTarget.dataset.id
                    },
                    success: function(e) {
                        t.getApp.core.hideLoading(), t.getApp.core.showModal({
                            title: "提示",
                            content: e.msg,
                            showCancel: !1,
                            success: function(e) {
                                e.confirm && 
																//#ifdef MP-WEIXIN
																t.onLoad({
                                    id: t.data.order.order_id
                                });
																//#endif
																//#ifndef MP-WEIXIN
																t.getApp.core.redirectTo({
																	url: '/pages/order-detail/order-detail?id='+t.data.order.order_id
																})
																//#endif
                            }
                        });
                    }
                }));
            }
        });
    }
		},
	}
</script>

<style scoped>
page {
    overflow-x: hidden;
}

.status-bar {
    box-sizing: border-box;
    padding: 0 88upx;
    color: #fff;
    font-size: 13pt;
    height: 120upx;
    line-height: 120upx;
    position: relative;
    z-index: 8;
}

.status-bar image {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.block {
    background: #fff;
    padding: 32upx 24upx;
    margin-bottom: 20upx;
}

.block .block-row {
    margin-bottom: 10upx;
}

.block .block-footer {
    border-top: 1upx solid #eee;
    margin-left: -24upx;
    margin-right: -24upx;
    padding: 24upx;
    padding-bottom: 0;
    margin-top: 32upx;
    text-align: right;
    font-weight: bold;
}

.goods-item {
    border-bottom: 1upx solid #E3E3E3;
    padding-bottom: 32upx;
    margin-bottom: 32upx;
}

.goods-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.refund-btn {
    float: right;
    height: 60upx;
    border: 1upx solid #bbb;
    padding: 0 30upx;
    border-radius: 10upx;
    margin-top: 20upx;
}

.refund-text {
    float: right;
    display: inline-block;
    margin-top: 20upx;
}

.pay-type {
    width: 100%;
    padding: 32upx 0 8upx 0;
    border-top: 1upx solid #e2e2e2;
    margin-top: 32upx;
}

.play-btn {
    height: 64upx;
    border: 1upx solid #ff5c5c!important;
    color: #ff5c5c;
    border-radius: 10upx;
    line-height: 64upx;
    text-align: center;
    padding: 0 20upx!important;
    margin: 0 0 0 24upx!important;
    background-color: transparent!important;
}

.order-footer {
    height: 98upx;
    margin-top: 20upx;
    border-top: 1upx solid #e2e2e2;
    background-color: #ffffff;
    padding: 0 24upx;
    text-align: right;
    justify-content: flex-end;
}
</style>
